<template>
  <div class="list">
    <div class="top">
      <el-button type="primary" @click="selectDel">删除所选</el-button>
      <el-select v-model="address" placeholder="请选择">
        <el-option
          v-for="item in addressList"
          :key="item.value"
          :label="item.key"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-input v-model="keywords" placeholder="请输入搜索名称"></el-input>
    </div>
    <!-- 表格 -->
    <el-table
      ref="multipleTable"
      :data="filList"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
    <!-- 复选框 -->
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="ID" width="120" props="id">
      </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="money" label="账户余额">
      </el-table-column>
      <el-table-column prop="thumb" label="图片预览"> 
        <template slot-scope="scope">
              <el-image 
                style="width: 100px; height: 100px"
                :src="scope.row.thumb" 
                :preview-src-list="[scope.row.thumb]">
            </el-image>
        </template>
      </el-table-column>
       <el-table-column prop="address" label="地址"> </el-table-column>
       <el-table-column prop="state" label="状态"> 
        <template slot-scope="scope">
            <el-tag :type="scope.row.state ==='成功'?'success':'danger'">{{scope.row.state}}</el-tag>
        </template>
       </el-table-column>
       <el-table-column prop="date" label="事件"> </el-table-column>
       <el-table-column
      
        label="操作"
        width="100">
        <template slot-scope="scope">
            <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
            <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
        </template>
        </el-table-column>
    </el-table>
    <!-- 弹出框 -->
    <el-dialog
  title="编辑"
  :visible.sync="dialogVisible"
  width="30%"
 >
  
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="用户名">
        <el-input v-model="form.name"></el-input>
    </el-form-item>
        <el-form-item label="地址">
        <el-input v-model="form.address"></el-input>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="confirmEdit">确 定</el-button>
  </span>
</el-dialog>
<!-- 分页 -->
  <el-pagination
      :current-page.sync="pageNum"
      :page-size.sync="pageSize"
      layout="prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      address: "",
      addressList: [
        {
          key: "广东省",
          value: "广东省",
        },
        {
          key: "湖南省",
          value: "湖南省",
        },
        {
          key: "福建省",
          value: "福建省",
        },
      ],
      keywords: "", //搜索框的关键字
      userList: [], //存放json数据
      selectArrId:[],//
      dialogVisible:false,
      form:{},//编辑的表单数据
      pageNum:1,//当前页
      pageSize:2,//每页条数
      total:0
    };
  },

  created() {
    this.getList();
  },
//   计算属性
  computed: {
     filList(){
        console.log(this.keywords)
        // 地址的查询
        let list = this.userList.filter(item=>item.address.includes(this.address))
        // 地址查询之后 用查询后的数组在做用户名的查询
        list = list.filter(item=>item.name.includes(this.keywords))
        // 通过 查询后的结果做分页
        this.total = list.length
        let start = (this.pageNum-1)*this.pageSize
        let end = this.pageNum*this.pageSize
       return  list.slice(start,end)
     }
  },
  methods: {
    getList() {
      axios.get("table.json").then((res) => {
        console.log(res);
        this.userList = res.data.list;
      });
    },
    // 选中触发
    handleSelectionChange(val){
      console.log(val);//val就是选中的项
      this.selectArrId = val.map(item=>item.id)
      console.log(this.selectArrId);

    },
    // 删除所选
    selectDel(){
       this.userList = this.userList.filter(item=>!this.selectArrId.includes(item.id))
    },
    // 点击编辑
    handleEdit(row){
        this.dialogVisible = true
        this.form = JSON.parse(JSON.stringify(row))

    },
    // 编辑
    confirmEdit(){
        // 找到修改的那一条
      let index =  this.userList.findIndex(item=>item.id==this.form.id)
    //   this.userList[index]  = this.form
      console.log(this.userList);
    //   通过数组的下标 给某一项赋值 在vue2中 是不会触发 updated钩子函数 所以视图不会更改 
    //   this.$set(this.userList,index,this.form)
      this.dialogVisible = false

    },
    // 单个删除
    del(row){
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            let index =  this.userList.findIndex(item=>item.id==row.id)
            this.userList.splice(index,1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });


    }
  },
};
</script>
<style lang="scss" scoped>
.top {
  display: flex;
  .el-input {
    margin: 0 30px;
    width: 200px;
  }
}
</style>
